<!DOCTYPE html>
<html>
<head>
    

    <include file="Common/head"/>
    <link href="__PLU__/sweetalert2/sweetalert2.min.css" rel="stylesheet" />

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    
    <!-- Panel Other -->
    <div class="ibox float-e-margins">
        <div class="ibox-title" style="line-height: 20px;">
            <h5> 投票活动 </h5>
            <div style="display: inline-block;margin-bottom:5px;float: right;">
                <span style="color: #bfbfbf;font-weight: 200;margin-right: 10px;">当前分类：{$category.title}</span>
                <span><input value="/index.php/Article/index/cate/{$category.name}" style="height: 20px;width: 350px;background-color: #FFF; background-image: none; border: 1px solid #e5e6e7;border-radius: 1px;"></span>
            </div>
        </div>
        <div class="ibox-content">
            <div class="row row-lg">
                
                <div class="col-sm-12">
                    <div class="clearfix" style="width:100%;">
                        <div class="bars pull-left"><div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                            <if condition="I('get.pid',0) neq 0">
                                <button type="button" class="btn btn-outline btn-default" href="{:U('ActivityVote/index',['category_id'=>I('get.category_id')])}">
                                    <i class="glyphicon glyphicon-chevron-left" aria-hidden="true"></i>
                                </button>
                            </if>
                            <button type="button" class="btn btn-outline btn-default" href="{:U('Article/add',['category_id'=>I('get.category_id',$category['id'])])}">
                                <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-outline btn-default confirm" form="form" action="{:U('Article/delete',['category_id'=>I('get.category_id',0)])}">
                                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                            </button>
                        </div></div>
                        <div class="columns columns-right btn-group pull-right" style="margin-left: 5px;">
                            <button class="btn btn-default btn-outline" type="button" name="refresh" title="刷新" href="__SELF__"><i class="glyphicon glyphicon-repeat"></i></button>
                        </div>
                        <div class="pull-right search">
                            <input class="form-control input-outline" type="text" placeholder="搜索">
                        </div>
                    </div>
                    <div class="table-responsive">
                        <form id="form" method="post">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>
                                        <label>
                                            <input type="checkbox" name="checkAll" child="del-check">
                                            <span>全选</span>
                                        </label>
                                    </th>
                                    <th>标题</th>
                                    <th>进度</th>
                                    <th>浏览</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <volist name="list" id="info">
                                        <tr data-type="vote" data-id="{$info.id}" data-status="{$info.status}">
                                            <th>
                                                <label style="cursor: pointer; width: 100%;height: 100%;">
                                                    <input class="del-check" name="id[]" type="checkbox" class="checkbox" value="{$info.id}">
                                                    <span></span>
                                                </label>
                                            </th>
                                            <td><a href="{:U('ActivityVote/index',['category_id'=>12,'pid'=>$info['id']])}">{$info.title}</a></td>
                                            <td style="width: 30%;">
                                                <div style="display: flex;justify-content: space-between;">
                                                    <span data-type="time">{$info.time}</span>
                                                    <span data-type="progress">{$info.progress}%</span>
                                                </div>
                                                <div class="progress progress-striped active m-b-sm">
                                                    <div style="width: {$info.progress}%;<notempty name='info.animation'>animation:{$info.animation};</notempty><notempty name='info.background-color'>background-color:{$info.background-color};</notempty>" class="progress-bar"></div>
                                                </div>
                                            </td>
                                            <td>{$info.view}</td>
                                            <td>
                                                <button type="button" title="获取链接" url-sm="{$info.url_sm}" url="http://vote.huiyouzan.com/Vote/activity/id/{$info['id']}.html" class="btn btn-white btn-sm get-url"><i class="fa fa-link"></i> 获取网址 </button>
                                                <button type="button" href="{:U('ActivityVote/index',['category_id'=>12,'pid'=>$info['id']])}" class="btn btn-white btn-sm"><i class="fa fa-th-list"></i> 投票选项 </button>
                                                <button type="button" href="{:U('Article/edit',['id'=>$info['id'],'category_id'=>$info['category_id']])}" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> 编辑 </button>
                                                <button type="button" href="{:U('Article/delete',['id'=>$info['id'],'category_id'=>$info['category_id']])}" class="btn btn-white btn-sm confirm"><i class="fa fa-trash-o fa-fw"></i> 删除 </button>
                                            </td>
                                        </tr>
                                </volist>
                                </tbody>
                            </table>
                        </form>
                    </div>
    
                    <ul class="pagination">
                        {$page}
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel Other -->
</div>
<include file="Common/footer"/>
<script src="__JS__/content.min.js?v=1.0.0"></script>
<script src="__PLU__/sweetalert2/sweetalert2.min.js"></script>
<script src="__PLU__/sweetalert2/es6-promise.min.js"></script>
<script src="__PLU__/sweetalert2/finally.js"></script>
<script>
    $(document).ready(function () {
        $(".get-url").click(function () {
            var title = '获取网址',url = $(this).attr('url'), url_sm = $(this).attr('url-sm');
//            $.get(
////                '/admin.php/Article/createUrl',
//                'http://50r.cn/urls/add.json',
//                {"url":url},
//                function(res){
//                    console.log(res);
//                }
//
//            );
            swal({
                title: title,
                html: '网址：'+url
            })
        });

        // 获取投票活动列表
        setInterval(function(){
            // 投票活动进度
            var votes = [];
            $("[data-type='vote']").each(function(i){
                votes.push($($(this)[i]).data('id'))
            });
            var data = {action:'getVotes',votes:votes};
            $.post(
                '/index.php/Vote/api',
                data,
                function(res){
                    if (res.error === 0) {
                        for( var i = 0; i < res.data.length; i ++) {
                            var vote = res.data[i];
                            console.log(vote);
                            var vote_ele = $("[data-id='"+vote.id+"']");
                            var vote_time = vote_ele.find("[data-type='time']");
                            var vote_progress = vote_ele.find("[data-type='progress']");
                            var vote_progress_bar = vote_ele.find('.progress-bar');
                            var now = Date.parse(new Date())/1000;
                            var days, hours, minutes, seconds, str, progress;
                            console.log(now);
                            // 计算时间与进度
                            if ((now - vote.start) >= 0 && (now - vote.end) <= 0) {
                                // 开始中
                                days = Math.floor((vote.end - now)/(24*3600));
                                hours = Math.floor((vote.end - now)%(24*3600)/3600);
                                minutes = Math.floor((vote.end - now)%3600/60);
                                seconds = Math.floor((vote.end - now)%60);
                                str = '距离结束 ';
                                if (days > 0) {
                                    str += days + '天';
                                }
                                if (hours > 0) {
                                    str += hours + '小时';
                                }
                                if (minutes > 0) {
                                    str += minutes + '分钟';
                                }
                                str += seconds + '秒';
                                
                                vote_time.text(str);
                                progress = ((now - vote.start)/(vote.end - vote.start)*100).toFixed(2);
                                if (100 === progress) {
                                    progress = 99.99;
                                }
                                vote_progress.text(progress + '%');
                                vote_progress_bar.width(progress + '%');
                            } else if ((now - vote.start) < 0) {
                                // 开始前
                                days = Math.floor((vote.start - now)/(24*3600));
                                hours = Math.floor((vote.start - now)%(24*3600)/3600);
                                minutes = Math.floor((vote.start - now)%3600/60);
                                seconds = Math.floor((vote.start - now)%60);
                                str = '距离开始 ';
                                if (days > 0) {
                                    str += days + '天';
                                }
                                if (hours > 0) {
                                    str += hours + '小时';
                                }
                                if (minutes > 0) {
                                    str += minutes + '分钟';
                                }
                                str += seconds + '秒';

                                vote_time.text(str);
                                progress = 0;
                                vote_progress.text(progress + '%');
                                vote_progress_bar.width(progress + '%');
                            } else if ((now - vote.end) > 0) {
                                // 结束后
                                vote_time.text('已结束');
                                vote_progress.text('100%');
                                vote_progress_bar.width('100%');
                                vote_progress_bar.css('animation','none');
                                vote_progress_bar.css('background-color','#d6d6d6');
                            }
                        }
                        
                    }
                }
            )
            
            
        }, 10000);
    });
    
</script>
</body>
</html>
